<!DOCTYPE>
<html>
<head>
    <title>聊天室</title>
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
        body{
            margin-top:5px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">当前登录用户</h3>
                </div>
                <div class="panel-body">
                    <div class="list-group">
                        <a href="#" class="list-group-item">你好，<span id="user"></span></a>
                        <a href="logout" class="list-group-item">退出</a>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary" id="online">
                <div class="panel-heading">
                    <h3 class="panel-title">当前在线的其他用户</h3>
                    <a href="#" onclick="talk(this)" class="list-group-item">111aaa</a>
                </div>
                <div class="panel-body">
                    <div class="list-group" id="users">
                    </div>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">群发系统广播</h3>
                </div>
                <div class="panel-body">
                    <input type="text" class="form-control"  id="msg" /><br>
                    <button id="broadcast" type="button" class="btn btn-primary">发送</button>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title" id="talktitle"></h3>
                </div>
                <div class="panel-body">
                    <div class="well" id="log-container" style="height:400px;overflow-y:scroll">

                    </div>
                    <input type="text" id="myinfo" class="form-control col-md-12" /> <br>
                    <button id="send" type="button" class="btn btn-primary">发送</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }


    $(document).ready(function() {
        var user;
        var uid;
        // 指定websocket路径
        var websocket;
        $.get("/currentuser",function(data){
            user = data.name;
            uid = data.uid;
            $("#user").html("222aaa");

            if ('WebSocket' in window) {
                websocket = new WebSocket("ws://localhost:10086/wx/222aaa/oApmq5GpnR0o0GHN9jrO_AXk5VsM");
            }
            websocket.onmessage = function(event) {
                var data=JSON.parse(event.data);
                if(data.to==0){//上线消息
                    if(data.text!=user)
                    {
                        $("#users").append('<a href="#" onclick="talk(this)" class="list-group-item">'+data.text+'</a>');
                        alert(data.text + "上线了");
                    }
                }else if(data.to==-2){//下线消息
                    if(data.text!=user)
                    {
                        $("#users > a").remove(":contains('"+data.text+"')");
                        alert(data.text + "下线了");
                    }
                }else {
                    // 普通消息
                    // 接收服务端的实时消息并添加到HTML页面中
                    $("#log-container").append("<div class='bg-info'><label class='text-danger'>"+data.fromOpenid+"&nbsp;"+new Date().format("yyyy-MM-dd hh:mm:ss")+"</label><div class='text-success'>"+data.content+"</div></div><br>");
                    // 滚动条滚动到最低部
                    scrollToBottom();
                }
            };

            $.post("/onlineusers?currentuser="+user,function(data){
                for(var i=0;i<data.length;i++)
                    $("#users").append('<a href="#" onclick="talk(this)" class="list-group-item">'+data[i]+'</a>');
            });

        });





        $("#broadcast").click(function(){
            var data = {};
            data["fromOpenid"] = "系统消息";
            data["toOpenid"] = -1;
            data["content"] = $("#msg").val();
            websocket.send(JSON.stringify(data));
        });

        $("#send").click(function() {
            if ($("body").data("to")==undefined) {
                alert("请选择聊天对象");
                return false;
            }
            var data = {};
            data["fromOpenid"] = "222aaa";
            data["toOpenid"] = "oApmq5GpnR0o0GHN9jrO_AXk5VsM";
            data["content"] = $("#myinfo").val();
            websocket.send(JSON.stringify(data));
            $("#log-container").append("<div class='bg-success'><label class='text-info'>我&nbsp;" + new Date().format("yyyy-MM-dd hh:mm:ss") + "</label><div class='text-info'>" + $("#myinfo").val() + "</div></div><br>");
            scrollToBottom();
            $("#myinfo").val("");
        });

    });

    function talk(a){
        $("#talktitle").text("与"+a.innerHTML+"的聊天");
        $("body").data("to",a.innerHTML);
    }
    function scrollToBottom(){
        var div = document.getElementById('log-container');
        div.scrollTop = div.scrollHeight;
    }
</script>

</body>
</html>
